<template>
	<view>
		<view class="order-list">
			<view class="hearder">
				<image :src="orderInfo.logo" style="margin-right: 20rpx;"></image>
				<view class="nick-name">{{orderInfo.shop_name}}</view>
			</view>
			<view class="item2">
				<image class="sp-image" :src="orderInfo.goods_arr.image"></image>
				<view class="good-Info">
					<view class="good-name">{{orderInfo.goods_arr.name}}</view>
					<view class="good-yh" v-if="orderInfo!=null">
						<view class="yh-icon">惠</view><u-parse :content="orderInfo.goods_arr.activitydetails_content"></u-parse>
					</view>
					<view style="display: flex;">
						<view class="good-price" v-if="orderInfo!=null">数量：x1</view>
					</view>
				</view>
				
				
			</view>
			<view class="item2" style="flex-direction: column;" v-if="orderInfo!=null">
				<view class="order-info">
					订单编号：{{orderInfo.order_sn?orderInfo.order_sn:""}}
				</view>
				<view class="order-info">
					订单时间：{{orderInfo.order_time?orderInfo.order_time:""}}
				</view>
			</view>
			
			<view class="item2" style="flex-direction: column;border: transparent;" >
				<view class="order-info" style="color: #666666!important;" v-if="hxdiscountList.length!=0">
					赠送充电时长
				</view>
				<view class="zs-list">
					<block   v-for="item in hxdiscountList">
						<view  :class="activeId == item.id ? 'zs-item-active' : 'zs-item'"  v-if="item.id!=0" @click="bindMoneyType(item)">
							{{item.duration}}
						</view>
						<view class="zs-item-cover" v-if="item.id==0" >
						</view>
					</block>
					
				</view>
			</view>
			<view class="useBtn2" @click="payChange">
				提交
			</view>

		</view>


	</view>


</template>

<script>
	import {
		postNewsDetail,
		shopcategory,
		shoplist,
		hxdiscount,
		orderdetails,
		scancode
	} from "../../api/home.js";
	import {
		url
	} from "../../utils/url.js";
	export default {
		data() {
			return {
				activeId:null,
				payType: null,
				message: "",
				show: true,
				text: 20,
				current: 0,
				activeStyle: {
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#808080',
					transform: 'scale(1)'
				},
				q: "",
				cate_id: "",
				lng: "",
				lat: "",
				newDetail: {}, // 咨询详情
				list4: [],
				shoplist: [],
				hxdiscountList:[],
				orderInfo:null,
				discount_id:"",
				order_sn:""
			}
		},
		onLoad(e) {
			console.log(e.order_sn);
			this.order_sn=e.order_sn;
			this.init()
		},
		methods: {
			bindMoneyType(item){
				console.log(item);
				this.activeId=item.id;
				this.discount_id=item.id
			},
			payChange() {
				var data = {
					order_sn:this.order_sn,
					hxdiscount_id:this.discount_id,
					token: wx.getStorageSync("token")
				};
				console.log("scancode", data);
				scancode(data).then(res => {
					console.log("scancode", res);
					if (res.data.code == 1) {
						uni.showToast({
							title: "核销成功",
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 2000); 
					
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 2000); 
					}
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			async init() {
				let data={
					order_sn:this.order_sn,
					token:uni.getStorageSync('token')
				}
				var res = await orderdetails(data);
				if (res.data.code == 1) {
					uni.hideLoading()
					let newDetail = res.data.data;
					if(newDetail.order_sn==null){
						uni.showToast({
							title: "当前扫码订单异常",
							icon: 'none',
							duration:3500
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 3500);
						 
					}else{
						console.log(newDetail);
						this.orderInfo = newDetail;
						this.hxdiscount();
					}
				}
			},
			async hxdiscount() {
				uni.showLoading({
					title: "加载中"
				})
				var data = {
					shop_id:this.orderInfo.goods_arr.shop_id,
					token:uni.getStorageSync('token')
				}
				var res = await hxdiscount(data);
				uni.hideLoading()
				console.log("hxdiscount", res);
				if (res.data.code == 1) {
					let resultData = res.data.data;
					if(resultData.length/3!=0){
							let buweiNum=3-(resultData.length%3);
							for (var i = 0; i < buweiNum; i++) {
								resultData.push({
									id:0
								})
							}
					}
					this.hxdiscountList=resultData

				}
			},

			shopDetail(id) {
				uni.navigateTo({
					url: "/pages/home/shopDetail?id=" + id
				})
			}
		}
	}
</script>

<style>
	.zs-list{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

	}
	.zs-item-cover{
		margin-top: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 69rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 214rpx;
		height: 111rpx;
		border: 4rpx solid transparent;
		border-radius: 4rpx;
	}
	.zs-item{
		margin-top: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #05BD03;
		line-height: 69rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 214rpx;
		height: 111rpx;
		border: 4rpx solid #DCDCDC;
		border-radius: 4rpx;
	}
	.zs-item-active{
		margin-top: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #05BD03;
		line-height: 69rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 214rpx;
		height: 111rpx;
		border: 4rpx solid #05BD03;
		border-radius: 4rpx;
	}
	.order-info{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 60rpx;
	}
	.hearder{
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		margin:0 40rpx;
		border-bottom: 1px solid #DCDCDC;
		border-width: 80%;
	}
	.hearder image{
		width: 83rpx;
		height: 82rpx;
	}
	.nick-name{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	.wxpay-image {
		width: 42rpx;
		height: 43rpx;
		margin-right: 10rpx;
	}

	.closeIcon {
		width: 38rpx;
		height: 38rpx;
		background-image: url('@/static/images/close.png');
		background-repeat: round;
		content: "";
		z-index: 10;
		position: absolute;
		bottom: -60rpx;
	}

	.useBtn2 {
		margin: 0 91rpx;
		position: absolute;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		/* 		background: linear-gradient(to right, #98E05F, #0DE3AC);
 */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
		bottom: 170rpx;
		width: 568rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DE3AC, #98E05F);
		border-radius: 44rpx;
	}

	.show-qrcode {
		width: 560rpx;
		height: 570rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.qr-codeBg {
		width: 416rpx;
		height: 405rpx;
		background-image: url('@/static/images/codeBg.png');
		background-repeat: round;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.qrCode {
		width: 278rpx;
		height: 278rpx;
	}

	.yh-icon {
		width: 26rpx;
		height: 26rpx;
		background: #F5750A;
		font-size: 10rpx !important;
		border-radius: 4rpx;
		content: "惠";
		color: white;
		margin-right: 4rpx;
		text-align: center;
	}

	.order-list {
		margin-bottom: 40rpx;
		background-color: white;
	}

	.item1 {
		display: flex;
		border-bottom: 1px solid #DCDCDC;
		background-color: white;
	}

	.shop-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 86rpx;
		flex: 1;
	}

	.status {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF3434;
		line-height: 86rpx;
	}

	.item2 {
		display: flex;
		margin: 30rpx 40rpx;
		background-color: white;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #DCDCDC;
	}

	.sp-image {
		width: 164rpx;
		height: 164rpx;
		flex: 1;
		border-radius: 5rpx;
	}

	.good-Info {
		margin-left: 20rpx;
		flex: 3;
	}

	.good-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.good-yh {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		display: flex;
		/* 		line-height: 69rpx; */
	}

	.good-price {
		flex: 3;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 69rpx;
	}

	.good-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 69rpx;
	}

	.item3 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		padding: 0 40rpx;
	}

	.item4 {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}

	.order-num {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 69rpx;




		flex: 1;
	}

	.cancelBtn {
		background-color: rgba(238, 238, 238, 1);
		color: white;
		width: 170rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35px;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 72rpx;
		margin-right: 30rpx;
	}

	.useBtn {

		width: 170rpx;
		height: 72rpx;
		color: white;
		border-radius: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to right, #98E05F, #0DE3AC);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 72rpx;
	}
</style>
